<template>
  <div class="spike">
    <div
        class="spike-card"
        v-if="productList?.length>0">
      <div class="spike-card-top">
        <h2 class="spike-card-top-title">
          限时折扣
        </h2>
        <div
            class="spike-card-top-time"
            v-if="activityData?.state===2">
          <div class="session">活动已结束</div>
        </div>
        <div
            class="spike-card-top-time"
            v-else-if="count?.length > 0">
          <div class="session">距活动{{ count[0] }}还有</div>
          <div class="time">{{ count[1] }}:{{ count[2] }}:{{ count[3] }}</div>
        </div>
        <a
            v-show="componentContent.showMore"
            class="btn-more"
            @click="jumpDiscount(componentContent.id)">查看更多</a>
      </div>
      <div class="spike-card-list">
        <div
            class="spike-card-item"
            v-for="item in productList.slice(0,3)"
            :key="item.productId"
            @click="jumpProductDetail(item)">
          <div class="spike-card-item-img">
            <image
                :src="item.image"
                alt="" />
          </div>
          <div class="spike-card-item-info">
            <h3 class="name">
              {{ item.storeName }}
            </h3>
            <div class="price-warp">
              <div class="price">¥{{ item.price }}</div>
              <!-- <div class="original-price">
                ¥ {{item.originalPrice}}
              </div> -->
              <div class="stock">
                限量{{ item.stock }}件
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import commonMixin from '../mixin'
import { toRefs } from 'vue';

const props = defineProps({
  typeId: {
    type: Number,
    default: 1,
  },
  shopId: {
    type: Number,
    default: 0,
  },
  componentContent: {
    type: Object,
    default() {
      return {};
    }
  }
})
const {typeId, shopId, componentContent} = toRefs(props)
const {
  activityData,
  productList,
  count,
  jumpProductDetail,
  jumpDiscount
} = commonMixin(componentContent, typeId, shopId)
</script>

<style
    lang="scss"
    scoped>
.spike {
  &-card {
    border-radius: 20rpx;
    margin: 0 34rpx;

    &-top {
      position: relative;
      display: flex;
      margin-bottom: 17rpx;

      &-title {
        font-size: 32rpx;
        color: #333333;
        margin-right: 25rpx;
        font-weight: normal;
      }

      &-time {
        height: 40rpx;
        border-radius: 21px;
        border: 1px solid #EE6D46;
        display: flex;
        overflow: hidden;
        align-items: center;

        .session {
          height: 100%;
          line-height: 40rpx;
          background: #EE6D46;
          font-size: 20rpx;
          color: #FFFFFF;
          padding: 0 15rpx;
          border-radius: 21rpx;
        }

        .time {
          font-size: 20rpx;
          color: #EE6D46;
          padding: 0 14rpx 0 10rpx;
        }
      }

      .btn-more {
        position: absolute;
        right: 8rpx;
        top: 0rpx;
        line-height: 40rpx;
        padding-right: 30rpx;
        font-size: 24rpx;
        color: #999;
        background: url("https://common-api.dongliboy.top/static/images/icon-arrow.png") no-repeat right center / 20rpx 20rpx;
      }
    }

    &-list {
      background-color: #ffffff;
      display: flex;
      overflow: auto;
      padding: 20rpx;
      border-radius: 15rpx;
    }

    &-item {
      border-radius: 15rpx;
      overflow: hidden;
      align-items: center;
      box-sizing: border-box;
      flex: 0 0 203rpx;
      margin-right: 18rpx;

      &-img {
        width: 203rpx;
        height: 203rpx;

        image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      &-info {
        width: 203rpx;

        .name {
          font-size: 30rpx;
          font-weight: normal;
          line-height: 40rpx;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 15rpx 0 6rpx;
        }

        .price-warp {
          display: flex;
          align-items: center;
        }

        .price {
          font-size: 32rpx;
          color: #EE6D46;
          padding-right: 10rpx;
          display: inline-block;
        }

        .original-price {
          font-size: 20rpx;
          line-height: 28rpx;
          color: #CCCCCC;
          display: inline-block;
          white-space: nowrap;
        }

        .stock {
          line-height: 1em;
          display: inline-block;
          font-size: 20rpx;
          color: #999999;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
